<template>
    <div>
        <el-dialog v-model="centerDialogVisible" :title=title width="500" align-center>
            <el-form v-if="title=='添加'" ref="ruleFormRefAdd" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
                <el-form-item label="广告标题" prop="title">
                    <el-input placeholder="请输入广告标题" v-model="ruleForm.title" />
                </el-form-item>
                <el-form-item label="广告类型" prop="adv_type">
                    <el-select v-model="ruleForm.adv_type" placeholder="请选择广告类型">
                        <el-option label="轮播" value=1 />
                        <el-option label="广告" value=2 />
                    </el-select>
                </el-form-item>
                <el-form-item label="图片">
                    <el-upload class="avatar-uploader" :show-file-list="false" :auto-upload="false"
                        :on-change="imgUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input-number v-model="ruleForm.sort" :min="1" :max="10" controls-position="right" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRefAdd)">
                        立即添加
                    </el-button>
                    <el-button @click="resetForm(ruleFormRefAdd)">取消</el-button>
                </el-form-item>
            </el-form>
            <!-- 编辑 -->
            <el-form v-else ref="ruleFormRefEdit" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
                <el-form-item label="广告标题" prop="title">
                    <el-input placeholder="请输入广告标题" v-model="ruleForm.title" />
                </el-form-item>
                <el-form-item label="广告类型" prop=" adv_type">
                    <el-select v-model="ruleForm. adv_type" placeholder="请选择广告类型">
                        <el-option label="轮播" value=1 />
                        <el-option label="广告" value=2 />
                    </el-select>
                </el-form-item>
                <el-form-item label="图片">
                    <el-upload class="avatar-uploader" :show-file-list="false" :auto-upload="false"
                        :on-change="imgUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input-number v-model="ruleForm.sort" :min="1" :max="10" controls-position="right" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRefEdit)">
                       确定
                    </el-button>
                    <el-button @click="resetForm(ruleFormRefEdit)">取消</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import instance from '../utils/request'
const title = ref('')
const centerDialogVisible = ref(false)
const imageUrl = ref('')    //头像上传图片路径
let ruleFormRefEdit = ref(null)
let ruleFormRefAdd = ref(null)
let ruleForm = reactive({
    title: '',
    sort: 1,
    adv_type:0,
    img_path:''
})
const showdialog = (row) => {

    if (row) {
        title.value = "编辑"
        Object.assign(ruleForm, row)

    } else {
        title.value = "添加"
   
        ruleForm = reactive({
            title: '',
            sort: 1,
            adv_type:'',
            img_path:''
        })

    }

    centerDialogVisible.value = true
    if (!centerDialogVisible.value) {
        ruleFormRefAdd = ref(null)
        ruleFormRefEdit = ref(null)
    }
}

defineExpose({ showdialog })

const rules = reactive({
    title: [
        { required: true, message: '广告标题不能为空', trigger: 'blur' },
    ],
    adv_type: [
        { required: true, message: '请选择广告类型', trigger: 'blur' },
    ],

})

const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate(async(valid, fields) => {
        if (valid) {
            if(title.value == "添加"){
                // 添加接口
                const obj = {
                    title:ruleForm.title,
                    img_path:ruleForm.img_path,
                    sort:ruleForm.sort,
                    adv_type:Number(ruleForm.adv_type)

                }
                console.log(obj);
                
                const res = await instance.post('advert/addAdv',obj)
                
            }else{

            }
            centerDialogVisible.value = false
        } else {
        }
    })
}

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
    centerDialogVisible.value = false
}

//图片上传完成执行的回调
const imgUpload = (files) => {
    let file = files.raw
    imageUrl.value = URL.createObjectURL(file)
    // 转成base64
    var reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
        ruleForm.img_path = reader.result 
        
    }
}


</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>